<script setup lang="ts">
import { ref } from 'vue';
import type { PropType } from 'vue';
import type { DiscussionCate } from '@/types/types'
import { useRouter } from 'vue-router'
import escape2html from '@/api/escape2html'

const router = useRouter()
const { toHtml } = escape2html()

const props = defineProps({
  data: {
    type: Object as PropType<DiscussionCate>,
    required: true
  }
})

const shortText = (text: string) => {
  if (text.length>100) {
    return text.slice(0, 40) + '...'
  }
  return text
}

const routeTo = () => {
  router.push(`/discate/${props.data.id}`)
}

// time stamp to time
const conventTime = (time: number) => {
  const date = new Date(time * 1000)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  // const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
  // const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  // const second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return `${year}-${month}-${day}`
}

let regex = /&lt;(?!br\/&gt;)(.*?)&gt;/g;
</script>

<template>
  <div class="sayinglist">
    <div class="list-title">
      {{ props.data.topic }}
    </div>
    <div class="list-text" v-if="props.data.introduce==''">
      &emsp;&emsp;{{ shortText((props.data.content.replace( regex, '' )).replace(/&amp;lt;br\/&amp;gt;/g,'&emsp;&emsp;')) }}
    </div>
    <div class="list-text" v-html="toHtml(props.data.introduce)" v-else></div>
    <div class="list-tail">
      <span class="showall" @click="routeTo">
        查看完整内容
      </span>
      <div class="time">发布于 {{ conventTime(props.data.createAt) }}</div>
    </div>
    <div class="list-line"></div>
  </div>
</template>

<style scoped>
.sayinglist {
  width: 100%;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.list-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  flex: 1;
  line-height: 30px;
  margin-left: 25px;
}

.list-title {
  font-weight: 600;
  font-size: 20px;
  position: relative;
  margin-left: 20px;
  color: #f5900a;
}

.list-line {
  height: 2px;
  width: 100%;
  margin-top: 7px;
  background-color: #f2ac1c;
}

.time {
  font-size: 13px;
  color: #cfcccd;
  margin-left: auto;
}

.list-text {
  margin-top: 10px;
  line-height: 28px;
}

.showall {
  cursor: pointer;
  color: #f2ac1c;
  margin-left: 20px;
}

.list-title::before {
  content: "";
  display: inline-block;
  border-radius: 100%;
  height: 6px;
  width: 6px;
  background-color: #f5900a;
  position: absolute;
  top: 40%;
  left: -15px;
}

.list-tail {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}
</style>